<template>
  <div>
    <ind-header />
    <el-container>
      <el-aside width="180px" class="demo">
        <!-- 侧边栏导航 -->
        <div class="user-nav">
          <ul>
            <li :class="{ active: $router.path == '/center/user' }">
              <router-link to="/center/user">我的个人信息</router-link>
            </li>
            <li :class="{ active: $router.path == '/center/mypicture' }">
              <router-link to="/center/mypicture">修改头像</router-link>
            </li>
            <li :class="{ active: $router.path == '/center/pwd' }">
              <router-link to="/center/pwd">修改密码</router-link>
            </li>
            <li :class="{ active: $router.path == '/center/phone' }">
              <router-link to="/center/phone">修改手机号</router-link>
            </li>
            <li :class="{ active: $router.path == '/center/mydeserve' }">
              <router-link to="/center/mydeserve">我的预约</router-link>
            </li>
          </ul>
        </div>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import IndHeader from "@/components/IndHeader.vue";
export default {
  components: { IndHeader },
  data() {
    return {
      now: 1,
    };
  },
  mounted() {
    console.log(this.$router);
  },
};
</script>

<style lang="scss" scoped>
.user-nav {
  width: 100%;
  background-color: #fc9ab2;
  text-align: center;
  height: calc(100vh - 100px);
  ul {
    height: 100%;
    li {
      transition: all 0.5s;
      cursor: pointer;

      &:hover,
      &.active {
        background-color: #ff4c79;
      }
      a {
        color: #fff;
        font-size: 18px;
        line-height: 50px;
        font-weight: 500;
      }
    }
  }
}
</style>
